<template>
 <div class="article_data pd_40">
   <div>
     <el-row :gutter="40">
      <el-col :span="7">
        <div class="fsc">
          <span class="articlelist_lable">文章名称</span>
          <el-input
            placeholder="请输入"
            v-model.trim="tableData.title">
          </el-input>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="fsc">
          <span class="articlelist_lable">上架时间</span>
          <el-date-picker
            v-model="dataTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="fsc">
          <span class="articlelist_lable">分属版块</span>
             <el-select v-model="tableData.type" placeholder="全部">
              <el-option
                v-show="item.id !== 7"
                v-for="item in cateList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
        </div>
      </el-col>

      <el-col class='mg_t20' :span="7">
        <div class="fsc">
          <span class="articlelist_lable">置顶状态</span>
          <el-select v-model="tableData.top" placeholder="全部">
            <el-option
              v-for="item in optionTop"
              :key="item.label"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </el-col>
     </el-row>
     <p class="articlelist_query fec">
      <el-button @click="reset" >重置</el-button>
      <el-button @click="query" type="primary">查询</el-button>
    </p>
   </div>
   <div>
     <el-table
      :data="tableList"
      stripe
      style="width: 100%">
      <el-table-column
        prop="title"
        label="文章名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="starttime"
        label="上架日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="分属板块">
        <template slot-scope="scope">
          <span>{{getCate(scope.row.categories_id)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="浏览次数">
      </el-table-column>
      <el-table-column
        prop="address"
        label="浏览人数">
      </el-table-column>
      <el-table-column
        prop="commentNum"
        label="评论数">
      </el-table-column>
      <el-table-column
        prop="address"
        label="转发人数">
      </el-table-column>
      <el-table-column
        prop="likeNum"
        label="点赞数">
      </el-table-column>
      <el-table-column
        prop="collectionNum"
        label="收藏数">
      </el-table-column>
      <el-table-column
        prop="lookNum"
        label="想去看看">
      </el-table-column>
      <el-table-column
        prop="haveNum"
        label="到此一游">
      </el-table-column>
      <el-table-column
        label="置顶状态">
        <template slot-scope="scope">
          <span>置顶{{scope.row.top}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        width="180"
        label="操作">
        <template slot-scope="scope">
          <el-button @click="centerDialogVisible = true" type="primary" size="small">预览</el-button>
          <el-button @click="centerDialogVisible = true" type="primary" size="small">数据分析</el-button>
        </template>
      </el-table-column>
    </el-table>
   </div>
  <div class="block fec mg_t30">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage4"
      :page-sizes="[10]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>

  <!--点击管理alert-->

  <el-dialog title="文章数据分析" width="650px" center :visible.sync="centerDialogVisible">
      <div>
        <el-row class="analysis_dialog f_13">
          <el-col :span="24">
            <div class="fsc">
              <p>文章名称:</p>
              <p class="mg_l10">西游记</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="fsc mg_t20">
              <p>作者:</p>
              <p class="mg_l10">阿九</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="fsc mg_t20">
              <p>分属板块:</p>
              <p class="mg_l10">阿九</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="fsc mg_t20">
              <p>上架时间:</p>
              <p class="mg_l10">2019-11-12</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="fsc mg_t20">
              <p>置顶状态:</p>
              <p class="mg_l10">阿九</p>
            </div>
          </el-col>
        </el-row>
      
        <el-table class="mg_t10" :data="tableData">
          <el-table-column property="date" label="日期" width="150"></el-table-column>
          <el-table-column property="name" label="姓名" width="200"></el-table-column>
          <el-table-column property="address" label="地址"></el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>



 </div>
 
 
</template>
<script>
export default {
  data() {
    return {
      index: 1,    //dialog里button
      value: '',
      input2: '',
      input3: '',
      value4: '',
      value1: '',
      currentPage4: 1,
      centerDialogVisible: false,
      cateList: [],
      tableList: [],
      tableData: {
        title: '',
        top: '',
        type: '',
        c_time: '',
        e_time: '',
        page: 1,
      },
      optionTop: [
        { label: '置顶1',id:'1'},
        { label: '置顶2',id:'2'},
        { label: '置顶3',id:'3'},
        { label: '置顶4',id:'4'},
        { label: '置顶5',id:'5'},
        { label: '置顶6',id:'6'},
        { label: '置顶7',id:'7'},
        { label: '置顶8',id:'8'},
        { label: '置顶9',id:'9'},
        { label: '置顶10',id:'10'},
      ],
      dataTime: [],
      total: null,
    }
  },
  created() {
    this.getList();
    this.addCate();
  },
  watch: {
    'dataTime'(xin,jiu) {
      if(xin == null) {
        this.tableData.c_time = '';
        this.tableData.e_time = '';
      }
    }
  },
  methods: {
    reset() {
      this.tableData.title = '';
      this.tableData.top = '';
      this.tableData.type = '';
      this.tableData.c_time = '';
      this.tableData.e_time = '';
      this.tableData.page = 1;
      this.currentPage4 = 1;
      this.getList();
      
    },
    query() {
      let time = this.dataTime;
      if(time instanceof Array) {
        if(time.length > 0) {
          this.tableData.c_time = Number(time[0]/1000);
          this.tableData.e_time = Number(time[1]/1000);
        }
      } 
      this.tableData.page = 1;
      this.currentPage4 = 1;
      this.getList();
    },

    getList() {
      let url = '/admin/article/get_article_info';
      let data = this.tableData;
      this.$request.post(url,data).then(res => {
        console.log(res)
        if(res.data.code == '0000') {
          console.log(res);
          this.tableList = res.data.data.list;
          this.total = res.data.data.page.total;
          

        }
      })
    },
    getCate(id) {
      if(id==1) {
        return ''  
      }
    },
    addCate() {
      let url = '/admin/article/getCategories';
      let data = {};
      this.$request.post(url,data).then(res => {
        console.log(res)
        if(res.data.code == '0000') {
          this.cateList = res.data.data;
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.tableData.page = val;
      this.currentPage4 = val
      this.getList();
    },
    submitForm(formName) {
        this.centerDialogVisible = false;
        this.$refs[formName].validate((valid) => {
            if (valid) {
            alert('submit!');
            } else {
            console.log('error submit!!');
            return false;
            }
        });
    },
    resetForm(formName) {
        this.centerDialogVisible = false;
        this.$refs[formName].resetFields();
    }
  },
  
}
</script>
<style scoped lang="less">
  .analysis_dialog {
    border-bottom: 1px solid #999;
    padding-bottom: 30px;
  }
  .articlelist_lable {
    min-width: 20%;
    white-space: nowrap;
  }
  .articlelist_query {
    margin-right: 100px;
    height: 100px;
  }
</style>

